<template>
<el-container class="container">
    <el-header class="header" height="70px">
        <el-row class="header-row">
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <img class="header-img" src="@/assets/logo.png" alt="无法显示图片">
                </div>
            </el-col>
            <el-col :span="14" class="header-middle">
                <h2>轨 道 检 测 数 据 智 能 化 处 理 平 台</h2>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <!-- <p class="header-using">欢迎您，{{this.using}} ！</p>
                    <a class="logout" @click.prevent="handleLogout" href="#">退出</a> -->
                    <!-- 悬浮激活 -->
                    <el-dropdown @command="handleCommand">
                        <el-avatar icon="el-icon-user-solid" class="header-ava"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>{{this.using}}</el-dropdown-item>
                            <el-dropdown-item divided command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>
    </el-header>
    <el-container>
        <el-aside class="aside" width="200px">
            <!-- 侧边栏导航 el-menu -->
            <el-menu :router="true" :unique-opened="true">
                <!-- 1 -->
                <el-menu-item index="main"><i class="el-icon-location"></i><span>首页</span></el-menu-item>
                <!-- 2 -->
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>轨检数据展示</span>
                    </template>
                    <el-menu-item index="trackdatalist">轨检数据查询</el-menu-item>
                    <el-menu-item index="trackdataline">轨检数据波形展示</el-menu-item>
                </el-submenu>
                <!-- 3 -->
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>轨检数据智能算法</span>
                    </template>
                    <el-menu-item index="wavematch">轨检数据波形匹配</el-menu-item>
                    <el-menu-item index="settlement">轨检数据沉降检测</el-menu-item>
                    <el-menu-item index="anomaly">轨检数据异常检测</el-menu-item>
                </el-submenu>
                <!-- 4 -->
                <el-menu-item index="sensor"><i class="el-icon-location"></i><span>采集设备管理</span></el-menu-item>
                <!-- 5 -->
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="user">用户信息管理</el-menu-item>
                    <el-menu-item index="log">用户日志管理</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main class="main">
            <router-view></router-view>
            <p class="footp">轨道检测数据智能化处理平台 © 2020-2020 Created by 北交大 515Lab. 数据组. zy.</p>
        </el-main>
    </el-container>
</el-container>
</template>

<script>
export default {
    data() {
        return {
            using: sessionStorage.getItem('username'), //简易写法
            activerouter: ''
        }
    },
    beforeCreate() {
        // 简单判断写法，不是真正的token
        const token = sessionStorage.getItem('username')
        if (!token) {
            this.$router.push({
                name: 'login'
            })
        }
    },
    methods: {
        handleCommand(command){
            if(command === 'logout'){
                this.handleLogout()
            }
        },
        handleLogout() {

            this.$confirm('您确认退出么?', '退出', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                sessionStorage.clear()
                this.$message.success('退出成功')
                this.$router.push({
                    name: 'login'
                })
            }).catch(() => {
                this.$message.info('已取消');
            });

        }
    }
}
</script>

<style>
.container {
    height: 100%;
}

.header {
    background-color: #005bac;
}

.header-img {
    height: 45px;
    margin-top: 10px;
}

/* .header-middle {
    text-align: center; 
}

.header-using {
    display: inline;
    color: white;
}

.logout {
    text-decoration: none;
    line-height: 60px;
    color: whitesmoke;

} */
.header-ava {
    margin: 16px;
}

.aside {
    background-color: white;
}

.main {
    background-color: #e9eef3;
}

.footp {
    text-align: center;
}
</style>
